<template>
  <div style="border: 1px solid red;height: 500px">
    <div style="margin-bottom: 20px">
      <div id="login">
        <a href="#" id="pswd" style="color: deepskyblue" @click="pswd()">密码登录</a><span style="margin: 0px 10px">|</span><a href="#" id="note" @click="note()" >短信登陆</a>
      </div>
      <div id="forget" hidden="hidden">
        <a href="#" style="font-size: 20px;text-decoration: none;color: deepskyblue"  @click="pswd()">返回登陆</a>
      </div>

    </div>
    <!--  密码登录-->
    <div id="pswdLogin">
      <el-input v-model="phone" name="phone" placeholder="请输入手机号"
                style="width: 400px;margin-bottom: 20px;"></el-input>
      <br>
      <el-input placeholder="请输入密码" v-model="password1" name="password" show-password style="width: 400px;"></el-input>
      <a href="#" @click="forget()" style="color: deepskyblue;text-decoration: none;position: absolute;margin-top: 10px">忘记密码？</a>
      <br>
      <br>
      <el-button type="primary" round @click="load" style="width: 200px;">登录</el-button>
      <el-button  round @click="register()" style="width: 200px;margin-bottom: 50px" >注册</el-button>
    </div>
    <!--  短信登录-->
    <div id="nodeLogin" hidden="hidden">
      <el-input v-model="phone" name="phone" placeholder="请输入手机号"
                style="width: 400px;margin-bottom: 20px;"></el-input>
      <a href="#" @click="forget()" style="color: deepskyblue;text-decoration: none;position: absolute;margin-top: 10px">获取验证码</a>
      <br>
      <el-input placeholder="请输入验证码"  name="password" show-password style="width: 400px;"></el-input>
      <br>
      <br>
      <el-button type="primary" round @click="load" style="width: 200px;">登录/注册</el-button>
    </div>
    <!--  忘记密码-->
    <div id="forgetLogin" hidden="hidden">
      <el-input v-model="password1" name="phone" placeholder="新密码：6~16位字符，区分大小写"
                style="width: 400px;margin-bottom: 20px;"></el-input>
      <br>
      <el-input placeholder="请输入确认密码" v-model="password12" name="password" show-password style="width: 400px;"></el-input>
      <br>
      <br>
      <el-input v-model="phone" name="phone" placeholder="请输入手机号"
                style="width: 400px;margin-bottom: 20px;"></el-input>
      <a href="#" @click="forget()" style="color: deepskyblue;text-decoration: none;position: absolute;margin-top: 10px">获取验证码</a>
      <br>
      <el-input placeholder="请输入验证码" name="password" show-password style="width: 400px;"></el-input>
      <br>
      <br>
      <el-button type="primary" round @click="load" style="width: 200px;">确认修改</el-button>
    </div>
    <img style="vertical-align: bottom" src="https://s1.hdslb.com/bfs/static/passport/static/img/2233login.af9c53d.png">
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{

    }
  },created() {
  },methods:{
    pswd(){
      document.getElementById("pswd").style.color= "deepskyblue";
      document.getElementById("note").style.color= "black";
      document.getElementById("pswdLogin").hidden="";
      document.getElementById("nodeLogin").hidden="hidden";
      document.getElementById("forgetLogin").hidden="hidden";
      document.getElementById("login").hidden="";
      document.getElementById("forget").hidden="hidden";
    },
    note(){
      document.getElementById("note").style.color= "deepskyblue";
      document.getElementById("pswd").style.color= "black";
      document.getElementById("pswdLogin").hidden="hidden";
      document.getElementById("nodeLogin").hidden="";
      document.getElementById("forgetLogin").hidden="hidden";
    },
    register(){
      document.getElementById("note").style.color= "deepskyblue";
      document.getElementById("pswd").style.color= "black";
      document.getElementById("pswdLogin").hidden="hidden";
      document.getElementById("nodeLogin").hidden="";
      document.getElementById("forgetLogin").hidden="hidden";
    },
    forget(){
      document.getElementById("pswd").style.color= "black";
      document.getElementById("note").style.color= "black";
      document.getElementById("pswdLogin").hidden="hidden";
      document.getElementById("nodeLogin").hidden="hidden";
      document.getElementById("forgetLogin").hidden="";
      document.getElementById("login").hidden="hidden";
      document.getElementById("forget").hidden="";
    }

  }
}
</script>

<style scoped>
#pswd{
  font-size: 20px;
  text-decoration: none;
}
#note{
  font-size: 20px;
  text-decoration: none;
}
</style>
